<template>
	<view style="padding: 30rpx;"> 
		<view class="userBox" v-for="(item, index) in friends" :key="index" >
			<image 	class="headImage"
					:src="item.avatar"
					mode="widthFix"
					@click="goProfile(index)"
					style="max-width: 60px; max-height: 60px; background-color: aqua;">
			</image>
			
			<view class="userDetail">
				<text>
					昵称：{{item.name}}
				</text>
				
				<text>
					用户名：{{item.username}}
				</text>
			</view>
			
			<view>
				<button class="Btn" @click = "deleteFriend(index)">解除</button>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	
	export default {
		data() {
			return {
				friends:[
					{avatar: null, name: '朋友1', username: '1'},
					{avatar: null, name: '朋友1', username: '1'},
					{avatar: null, name: '朋友1', username: '1'},
					{avatar: null, name: '朋友1', username: '1'},
					{avatar: null, name: '朋友1', username: '1'},
					{avatar: null, name: '朋友1', username: '1'},
					{avatar: null, name: '朋友1', username: '1'},
					{avatar: null, name: '朋友2', username: '2'},
					{avatar: null, name: '朋友3', username: '3'}
				],
				user:[
					
				]
			}
		},
		
		onLoad() {
			this.user = uni.getStorageSync('xm-user');
			console.log('-------------------------');
			let that = this;
			uni.request({
				url: config.baseUrl + '/friendchart/findfriends?selfId=' + this.user.id,
				method: 'GET',
				success(res) {
					that.friends = res.data;
					console.log(res);
				}	
			})
		},
		
		methods: {
			deleteFriend(index){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定解除好友关系?',
				    success: (res) => {
						if (res.confirm) {
							uni.request({
								url: config.baseUrl + "/friendchart/Delete?selfId=" + that.user.id + "&friendId=" + that.friends[index].id,
								method:'GET',
								success(res) {
									if(res.statusCode === 200){
										uni.showToast({
											icon: 'success',
											title: '解除成功'
										})
										that.friends.splice(index, 1)
									}
								}
							})
						} 
				    }
				});
			},
			
			goProfile(index){
				uni.navigateTo({
					url: '/pages/profile/profile?userId=' + this.friends[index].id
				})
			}
		}
	}
</script>

<style scoped>
	.userBox {
		display: flex;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
		margin-bottom: 5%;
		justify-content: flex-end;
	}
	
	.userDetail {
		margin-left: 8%;
		margin-right: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	
	.Btn{
		margin-top: 35%;
		background-color: crimson;
		color: white;
		font-weight: bold;
		font-size: 30rpx;
	}
</style>
